<template>
  <div class="index-edit">
    <el-container>
      <el-aside width="150px">
        <el-row :class="active===1?'active':''">
          <span @click="active=1">修改基本信息</span>
        </el-row>
        <el-row :class="active===2?'active':''">
          <span @click="active=2">上传店铺实拍图</span>
        </el-row>
        <el-row :class="active===3?'active':''">
          <span @click="active=3">上传营业资质图片</span>
        </el-row>
      </el-aside>
      <el-main>
        <!--基本信息 -->
        <div class="info" v-show="active===1">
          <div class="header">
            <el-form ref="form" :model="info" label-width="80px">
              <el-form-item>
                <div>
                  <el-upload
                    action="https://localhost:8080/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="onBeforeUpload"
                  >
                    <div class="attr">
                      <img src="../../../assets/images/arrt.jpg" />
                    </div>
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="门店编号" prop="store_id">
                <el-input v-model="info.store_id" disabled></el-input>
              </el-form-item>
              <el-form-item label="门店名称" prop="store_name">
                <el-input v-model="info.store_name"></el-input>
              </el-form-item>
              <el-form-item label="门店地址" prop="store_address">
                <el-cascader
                  v-model="info.store_address"
                  :options="options"
                  :props="opt"
                  style=" width:100%"
                ></el-cascader>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 基本信息end -->
        <!-- 上传图片 -->
        <div v-show="active===2">
          <div class="imgs" v-for="(v,i) in info.live_shot" :key="i">
            <!-- <img src="../../../assets/images/arrt.jpg" /> -->
            <img :src="v" />
          </div>
          <div class="uploader" style="float:left;">
            <el-upload
              class="avatar-uploader"
              action="https:/localhost:8080/assets/images"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </div>
        <!-- 上传图片end -->
        <!-- 营业资质 -->
        <div v-show="active===3">
          <el-alert
            title="营业资质图片只可查看，不可修改!"
            type="warning"
            :closable="false"
            show-icon
            style="margin-bottom:10px"
          ></el-alert>
          <el-carousel>
            <el-carousel-item v-for="(item,i) in info.Business_license" :key="i">
              <el-image :src="item"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 营业资质end -->
      </el-main>
    </el-container>
  </div>
</template>
<script>
import city from '../js/citydata'
export default {
  name: 'indexEdit',
  props: ['store'],
  data() {
    return {
      info: {
        // store_name: ''
      },
      value: [],
      options: {},
      active: 1,
      opt: {
        expandTrigger: 'hover',
        label: 'label',
        value: 'value',
        children: 'children'
      }
    }
  },
  methods: {
    handleAvatarSuccess(res) {
      console.log(res.data.tmp_path)
    },
    onBeforeUpload(file) {
      const isType = ['image/jpeg', 'image/png'].includes(file.type)
      // file.size 单位是字节 byte
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isType) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
      } else if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isType && isLt2M
    }
  },
  created() {
    this.info = { ...this.store }
    this.info.store_address = this.info.store_address.split(' ')
    this.options = city
  }
}
</script>
<style lang="less" scoped>
.index-edit {
  /deep/ .el-image {
    display: block;
    width: 500px;
    height: 300px;
    padding: 0 114px;
  }
  .content-img {
    float: left;
    margin: 10px;
  }
  .imgs {
    width: 178px;
    height: 178px;
    float: left;
    margin: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    padding: 2px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .uploader {
    padding: 12px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/.el-upload--picture-card {
    width: 178px;
    height: 178px;
    line-height: 178px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-aside {
    padding: 20px 10px;
    border-right: 1px solid #ccc;
    cursor: pointer;
    .active {
      color: royalblue;
    }
    .el-row {
      width: 100%;
      height: 30px;
      font-size: 16px;
    }
  }
  .info {
    .header {
      .attr {
        width: 150px;
        height: 150px;
        position: relative;
        &::before {
          content: '+';
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          color: #fff;
          font-size: 40px;
          text-align: center;
          line-height: 150px;
          //   line-height: ;
          background: rgba(0, 0, 0, 0.5);
        }
        img {
          width: 100%;
          height: 100%;
        }
        &:hover::before {
          display: block;
        }
      }
    }
  }
}
</style>
